<template>
  <div class="content">
    <a-page-header
        title="OJ 在线判题系统"
        subtitle="创建题目"
        :show-back="false"
    >
      <template #breadcrumb>
        <a-breadcrumb>
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>题目</a-breadcrumb-item>
          <a-breadcrumb-item>创建题目</a-breadcrumb-item>
        </a-breadcrumb>
      </template>
      <template #extra>
        <a-space>
          <a-button >
            <template #icon>
              <icon-sync />
            </template>
            重置
          </a-button>
          <a-button
              type="primary"
              @click="handleSubmit()"
              style="width: 100px;">
            <template #icon>
              <icon-send />
            </template>
            提交
          </a-button>
        </a-space>
      </template>
    </a-page-header>
    <a-form :model="topic" layout="vertical" :rules="rules"  ref="topicFormRef">

      <a-collapse :default-active-key="[1, 2]" style="margin-top: 20px">
        <a-collapse-item header="基础信息" :key="1">
          <a-row :gutter="16" style="margin-top: 20px">
            <a-col :span="12">
              <a-form-item field="title" label="题目标题" >
                <a-input v-model="topic.title" placeholder="请输入题目标题" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="tags" label="题目标签" >
                <a-input-tag v-model="topic.tags" placeholder="请输入标签" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row  :gutter="18">
            <a-col :span="12">
              <a-form-item field="topicType" label="比赛类型" >
                <a-radio-group v-model="topic.topicType" @change="changeTopicType()">
                  <a-radio :value="0" disabled>自动判题</a-radio>
                  <a-radio :value="1">手动判题</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="topicExp" label="题目经验值" >
                <a-input-number
                    style="width: 100%;"
                    v-model="topic.topicExp"
                    model-event="input"
                    placeholder="请输入题目经验值"
                    :min="1"
                    :max="100" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row  :gutter="16">
            <a-col :span="12">
              <a-form-item field="topicLanguage" label="使用语言" >
                <a-select  placeholder="请选择使用的语言" v-model="topic.topicLanguage">
                  <a-option :value="0">Java</a-option>
                  <a-option :value="1">Html/Css/JavaScript</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="topicNumber" label="展示id" >
                <a-input v-model="topic.topicNumber" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row  :gutter="16">
            <a-col :span="12">
              <a-form-item field="difficulty" label="题目难度" >
                <a-input-number
                    style="width: 100%;"
                    v-model="topic.difficulty"
                    placeholder="请输入题目难度"
                    model-event="input"
                    :min="1"
                    :max="100" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="topicTip" label="题目提示" >
                <a-input v-model="topic.topicTip" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-collapse-item>
        <a-collapse-item header="题目内容" :key="2">
          <MdEditor :value="topic.content" :handleChange="onContentChange" />
        </a-collapse-item>
      </a-collapse>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import {ref} from "vue";
  import MdEditor from "../../components/MdEditor.vue";
  import {Message} from "@arco-design/web-vue";
  import request from "../../axios/axios.ts";
  import router from "../../router/router.ts";

  const topic = ref({
    content: "",
    difficulty: 0,
    judgeCase: [
      {
        input: "1 2",
        output: "3"
      }
    ],
    judgeConfig: {
      timeLimit: 0
    },
    tags: [],
    title: "",
    topicCase: [
      {
        input: "",
        output: ""
      }
    ],
    topicExp: 0,
    topicLanguage: 0,
    topicNumber: "",
    topicTip: "",
    topicType: 1
  })

  const changeTopicType = () => {
    topic.value.topicLanguage = topic.value.topicType === 0 ? 0 : 1
  }

  const topicFormRef = ref();

  const rules = {
    title: [
      { required: true, message: '请输入题目标题', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
    ],
    tags: [
      { required: true, message: '请输入标签', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 10'}
    ],
    content: [
      { required: true, message: '请输入题目内容', trigger: 'blur' },
      { min: 1, max: 8000, message: '长度在 1 到 8000 个字符', trigger: 'blur' }
    ],
    topicNumber: [
      { required: true, message: '请输入题目展示id', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
    ],
    topicTip: [
      { required: true, message: '请输入题目提示', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1  到 100 个字符', trigger: 'blur' }
    ],
    topicExp: [
      { required: true, message: '请输入题目经验值', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
    ],
    difficulty: [
      { required: true, message: '请输入题目难度', trigger: 'blur' },
      { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
    ],
  }
  const handleSubmit = () => {
    topicFormRef.value.validate().then((error) => {
      if (error) {
        Message.warning("请先按照要求填写表单")
        return
      }
      request.post("/api/topic/add", {
        ...topic.value
      }).then(res => {
        if (res.data.success) {
          Message.success("添加成功")
          topicFormRef.value.resetFields()
          router.push("/macth")
        }
      })
    })
  }

  const onContentChange = (value: string) => {
    topic.value.content = value
  }
</script>

<style>
.content {
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
.arco-collapse-item-content{
  background-color: #fff !important;
}
</style>
